<template>
	<view>
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view class="MyMusic">
			<view class="u-page">
				<view class="personInfo">
					<view class="left">
						<u-avatar :src="src"></u-avatar>
						<text class="name">天下第一帅</text>
					</view>
					<view class="right">
						<!-- <u-icon name="arrow-right"></u-icon> -->
					</view>
				</view>
				<view class="funcList">
					<u-grid :col="2" :border="false">
						<u-grid-item @click="goMyLike">
							<u-icon name="heart-fill" :size="60"></u-icon>
							<view class="grid-text">我喜欢</view>
						</u-grid-item>
						<u-grid-item @click="goCollect">
							<u-icon name="star-fill" :size="60"></u-icon>
							<view class="grid-text">收藏</view>
						</u-grid-item>
					</u-grid>
				</view>
				<u-tabs :list="Tablist" :is-scroll="false" :current="current" @change="change" :active-color="textColor"></u-tabs>
				<view class="songSheetBox" v-if="current == 0">
					<view v-if="songSheetList.length">
						<view class="item" @click="goNextPage(item)" v-for="(item,index) in songSheetList" :key="item.id">
							<view class="left">
								<view class="box">
									<u-icon name="bookmark-fill"
									size="50"
									color="#fff"></u-icon>
								</view>
							</view>
							<view class="right">
								<view class="text">{{item.songSheetName}}</view>
							</view>
						</view>
					</view>
					<view v-else class="null">
						暂无数据
					</view>
					<view class="add-item" @click="ShowPopup">
						<view class="left">
							<view class="box">
								<u-icon name="plus"
								size="50"
								color="#fff"></u-icon>
							</view>
						</view>
						<view class="right">
							<text>创建歌单</text>
						</view>
					</view>
				</view>
				<view class="CSongSheetBox" v-if="current == 1">
					<view  v-if="CSongSheetList.length">
						<view class="item" v-for="(item, index) in CSongSheetList" :key="CSongSheetList.id">
							<view class="left">
								<view class="box">
									<u-icon name="star-fill"
									size="50"
									color="#fff"></u-icon>
								</view>
							</view>
							<view class="right">
								<text>{{CSongSheetList.songSheetName}}</text>
							</view>
						</view>
					</view>
					<view v-else class="null">
						暂无数据
					</view>
				</view>
				<u-modal v-model="showPopup" title="音乐歌单" show-cancel-button @cancel="onCancel" @confirm="confirmSheet">
					<view class="input">
						<u-input v-model="value" trim :type="type" trim focus/>
					</view>
				</u-modal>
			</view>
			<!-- 与包裹页面所有内容的元素u-page同级，且在它的下方 -->
			<u-tabbar :list="list" :active-color="textColor"></u-tabbar>
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from "vuex"
	export default {
		data() {
			return {
				textColor: "",
				src: 'static/logo.png',
				Tablist: [{
					name: '创建歌单'
				}, {
					name: '收藏的歌单'
				}],
				current: 0,
				showPopup: false,
				content: '东临碣石，以观沧海',
				value: '',
				type: 'text',
				songSheetList: [],
				CSongSheetList: [],
				collectIconFlag: false,
				sheetCollectionId: "",
			}
		},
		computed: {
			...mapState({
				list:({config})=>config.tabBarList,
				commonColor: ({config})=>config.commonColor,
				openid: ({config})=>config.openid,
			})
		},
		methods: {
			...mapMutations({
				SET_songSheetId: "config/SET_songSheetId",
				SET_songSheetName: "config/SET_songSheetName",
			}),
			change(index) {
				this.current = index;
				if(this.current == 0) {
					this.getEstablishSheetList();
				} else {
					this.getCollectSheetList();
				}
			},
			//创建歌单列表
			getEstablishSheetList() {
				this.$http.get("/queryUserSongSheet.htm",{userId: this.openid}).then(res => {
					console.log(res);
					this.songSheetList = res.result;
				})
			},
			//收藏歌单列表
			getCollectSheetList() {
				this.$http.get("/queryUserSongSheetCollection.htm", {userId: this.openid}).then(res => {
					console.log(res);
					this.CSongSheetList = res.result;
				})
			},
			goMyLike() {
				uni.navigateTo({
					url: "/pages/MineLike/MineLike"
				})
			},
			goCollect() {
				uni.navigateTo({
					url: "/pages/Collect/Collect"
				})
			},
			ShowPopup() {
				this.showPopup = true;
			},
			confirmSheet() {
				if(this.value) {
					this.$http.get("/insertSongSheet.htm", {
						userId: this.openid,
						songSheetName: this.value,
					}).then(res => {
						this.getEstablishSheetList();
						this.value = "";
					})
				} else {
					uni.showToast({
					    title: '请输入歌单标题',
					    icon: "none",
					});
					this.showPopup = true;
				}
			},
			onCancel() {
				this.value = "";
			},
			goNextPage(item) {
				this.SET_songSheetId(item.id);
				this.SET_songSheetName(item.songSheetName);
				uni.navigateTo({
					url: `/pages/SSDetailSheet/SSDetailSheet?songSheetId=${item.id}&&title=${item.songSheetName}`
				})
			},
		},
		created() {
			this.textColor= this.commonColor;
			this.getEstablishSheetList();
			console.log(this.openid);
		}
	}
</script>

<style lang="less" scoped>
.status_bar {
	height: var(--status-bar-height);
	width: 100%;
}
/deep/ .u-icon__icon {
	color: #d43c33;
}

.MyMusic {
	display: flex;
	flex-direction: column;
	height: 100%;
	.u-page {
		flex: 1;
		overflow: hidden;
		padding: 60rpx 30rpx;
		.personInfo {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			padding: 20rpx;
			.left {
				display: flex;
				align-items: center;
				.name {
					padding-left: 40rpx;
				}
			}
		}
		.funcList {
			display: flex;
			width: 100%;
			border-radius: 10rpx;
			overflow: hidden;
			margin-bottom: 20rpx;
		}
		.FMusic {
			display: flex;
			align-items: center;
			width: 100%;
			overflow: hidden;
			border-radius: 10rpx;
			padding: 20rpx 0;
			background-color: #fff;
			margin: 20rpx 0;
			.left {
				padding: 0 20rpx;
				.box {
					display: flex;
					justify-content: center;
					// align-items: center;
					width: 100rpx;
					height: 100rpx;
					border-radius: 10rpx;
					background-color: #000;
					opacity: .1;
				}
			}
			.right {
				display: flex;
				flex-wrap: wrap;
				.title {
					font-size: 30rpx;
					letter-spacing: 3rpx;
					color: #000;
					width: 100%;
				}
				.count {
					font-size: 20rpx;
					color: #bbb;
				}
				
			}
		}
		.songSheetBox, .CSongSheetBox {
			width: 100%;
			background-color: #fff;
			.add-item, .item {
				display: flex;
				align-items: center;
				width: 100%;
				padding: 20rpx 0;
				.left {
					padding: 0 20rpx;
					.box {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 100rpx;
						height: 100rpx;
						background-color: #000;
						opacity: .1;
						border-radius: 10rpx;
					}
				}
				.right {
					display: flex;
					justify-content: space-between;
					font-size: 30rpx;
					letter-spacing: 3rpx;
					width: 100%;
				}
			}
		}
		.input {
			padding: 30rpx;
		}
		.null {
			padding: 20rpx;
			text-align: center;
		}
	}
}
</style>
